<template>
  <div>
    <van-popup
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '100%' }"
    >
      <van-nav-bar
        class="nav"
        title="我的客户"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <van-search
        placeholder="请输入客户名称"
        @search="search"
        v-model="queryParam.Keyword"
        @clear="clear"
      />
      <div style="width: 100%;padding-top: 10px;">
        <van-list
           v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoading"
        >
          <!--  @click="regionClick(item)" -->
          <div
            class="boxFormal"
            v-for="(item,index) in data"
            :key="index"
            @click="customerChoice(item)"
          >
            <div class="companyName" style="font-size:14px">
              {{ item.cCusName }}
            </div>
            <div class="code" style="font-size:14px">
              <div>客户编码:{{ item.cCusCode }}</div>
            </div>
            <!-- <div class="companyAddress" style="font-size:14px">
              {{ item.Address }}
            </div> -->
          </div>
        </van-list>
      </div>
      <!-- <div>
        <ul>
          <li
            class="ckbxcli"
            @click="customerChoice(item)"
            v-for="(item, index) in data"
            :key="index"
          >
            <p style="margin-top: 8px">
              <van-field v-model="item.cCusName" />
              <van-field label="客户编码:" v-model="item.cCusCode" />
            </p>
          </li>
        </ul>
      </div> -->
    </van-popup>
  </div>
</template>

<script>
import {
  Col,
  Cell,
  CellGroup,
  Picker,
  Popup,
  Search,
  NavBar,
  Field
} from "vant";

export default {
  components: {
    "van-nav-bar": NavBar,
    "van-picker": Picker,
    "van-popup": Popup, //弹层
    "van-search": Search, //搜索
    "van-field": Field,
    "van-col": Col,
    "van-cell": Cell,
    "van-cell-group": CellGroup
  },
  data() {
    return {
        loading: false,
      finished: false,
      selectedRowKeys: [],
      queryParam: [
        { condition: "cCusName" },
        { condition: "cProvince" },
        { condition: "cCity" },
        { condition: "cCounty" }
      ],
      pagination: {
        PageIndex: 1,
        PageRows: 10,
        Total:0
      },
      entity: {},
      judgment: true,
      data: [],
      show: false,
      Id: ""
    };
  },
  methods: {
     onLoading() {
      this.loading = true; //防止第一页重复加载
      // 上拉加载
      this.pagination.PageIndex++;
      // 获取客户列表信息
      this.getDataList();
    },
    //返回
    onClickLeft() {
      this.show = false;
    },
    close() {
      this.show = false;
    },
    clear() {
      this.queryParam = [];
      this.getDataList();
    },
    //搜索
    search(value) {
      console.log(value);
      this.queryParam.Condition = "cCusName";
      this.queryParam[0].Keyword = value;
      this.getDataList();
    },
    // 客户列表选择
    customerChoice(item) {
      console.log(item);
      this.$emit("customerChoice", item);
      // 选中客户数据列表后显示添加收件人按钮  调取子组件里的变量isAddButton
      this.show = false;
    },
    // 获取客户列表数据
    getDataList() {
      this.http
        .post("/CustomerManagement/Customer/GetDataListByMoreCondition", {
          PageIndex: this.pagination.PageIndex,
          PageRows:10,
          SortField: "Id",
          SortType: "desc",
          Search: this.queryParam,
          ...this.filters
        })
        .then(resJson => {
          this.data = resJson.Data;

          console.log(this.List);
        });
    },
    init() {
      this.show = true;
    },
    openForm() {
      this.init();

      // this.getDataList();
    }
  }
};
</script>

<style scoped>
/* #close {
  position: fixed;
  right: 0px;
  bottom: 0px;
  background: "#fff";
} */
/* .scrollBar {
  height: 550px;
  overflow: auto;
} */

.ckbxcli {
  border: 1px solid Gainsboro;
  /* width: 250px; */
  height: 150px;
  text-align: center;
  margin-left: 15px;
  margin-top: 15px;
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 2px;
  cursor: pointer;
  padding-top: 6px;
  list-style-type: none;
  display: inline-block;
}
ul {
  margin-top: 20px;
}
.nav {
  position: fixed !important;
  width: 100%;
}
</style>
